import React, { useState } from 'react';
import { List, Card, Row, Col, Button, Typography, Space, Avatar, Pagination } from 'antd';
import { StarOutlined, LikeOutlined, MessageOutlined, FieldTimeOutlined, DislikeOutlined, LeftOutlined, EyeOutlined } from '@ant-design/icons';
import { connect } from 'dva';
import { history } from 'umi';
import { getFilePrefix } from '../../utils/config';
const { Paragraph } = Typography;
const IconText = ({ icon, text }) => (
  <Space>
    {React.createElement(icon)}
    {text}
  </Space>
);

const AttentionDetail = ({ attentionUserInfo, userArticles, userInfo, total, dispatch }) => {
  const isLogin = userInfo && userInfo.userId > 0;
  const isAdmin = userInfo && userInfo.userType === 0;

  const [isFollowed, setIsFollowed] = useState(attentionUserInfo.isFollowed);
  const [followed, setFollowed] = useState(attentionUserInfo.followed);
  const handleAction = (type, payload) => {
    if (!isLogin) {
      message.error('请先登录');
      return;
    }
    if (isAdmin) {
      message.error('管理员不能操作');
      return;
    }
    dispatch({ type, payload });
  };
  const followUser = () => {
    handleAction('articleDetail/followUser', {
      userId: userInfo.userId,
      followerId: attentionUserInfo.userId,
      isFollow: !attentionUserInfo.isFollowed,
    });
    setIsFollowed(!isFollowed);
    setFollowed(isFollowed ? followed + 1 : followed - 1);
  };
  const handlPage = (page, pageSize) => {
    dispatch({
      type: "attentionList/queryUserArticles",
      payload: {
        page,
        pageSize,
      }
    })
  };
  return (
    <div style={{ marginTop: '1vh' }}>
      <Row>
        <Col span={3} >
          <div style={{ textAlign: 'center' }}>
            <LeftOutlined style={{ fontSize: '20px' }} onClick={() => window.history.back(-1)} />
          </div>
        </Col>
        <Col span={18}>
          <Card style={{ width: '100%', borderRadius: 10 }}>
            <Row>
              <Col span={3} offset={1}>
                <Avatar size={110} src={attentionUserInfo.imgFilePath === "" ? "/image/login/defaultFilePath.png" : getFilePrefix() + attentionUserInfo.imgFilePath} />
              </Col>
              <Col span={15} offset={1}>
                <h1>{attentionUserInfo.displayName}</h1>
                <p>{attentionUserInfo.signature === "" ? "这个人很懒，什么都没有留下" : attentionUserInfo.signature}</p>
                <br />
                <p style={{ fontWeight: '600' }}>
                  <span>关注数：{attentionUserInfo.follow}</span>
                  <span style={{ marginLeft: '.3rem' }}>粉丝数：{attentionUserInfo.followed}</span>
                </p>
              </Col>
              <Col offset={1} span={3}>
                {
                  userInfo.userId === attentionUserInfo.userId || !isLogin ? null : (
                    <Button
                      type={attentionUserInfo.isFollowed ? 'danger' : 'primary'}
                      key="followButton"
                      style={{ width: '100%' }}
                      onClick={followUser}
                    >
                      {attentionUserInfo.isFollowed ? '取消关注' : '关注'}
                    </Button>
                  )
                }
              </Col>
            </Row>
          </Card>
        </Col>
      </Row >
      <Row><Col span={18} offset={3}>
        <List
          size="small"
          dataSource={userArticles === null ? [] : userArticles}
          renderItem={(item) => (
            <List.Item>
              <Card hoverable style={{ width: '100%', borderRadius: 10 }} onClick={() => {
                history.push({ pathname: '/homePage/articleDetail', state: { articleId: item.articleId } })
                history.push({ pathname: '/homePage/articleDetail', state: { articleId: item.articleId } })
                dispatch({
                  type: 'homePage/viewArticle',
                  payload: {
                    articleId: item.articleId,
                  }
                })
              }}>
                <Card.Meta title={item.title} description={<Paragraph ellipsis={true}>{item.content.replace(/<[^>]*>?/gm, '')}</Paragraph>} />
                <Row>
                  <Col span={2}><IconText icon={StarOutlined} text={item.collectCount} key="list-vertical-star-o" /></Col>
                  <Col span={2} offset={1}><IconText icon={EyeOutlined} text={item.view} key="list-vertical-eye" /></Col>
                  <Col span={2} offset={1}><IconText icon={LikeOutlined} text={item.like} key="list-vertical-like-o" /></Col>
                  <Col span={2} offset={1}><IconText icon={DislikeOutlined} text={item.disLike} key="list-vertical-dislike-o" /></Col>
                  <Col span={2} offset={1}><IconText icon={MessageOutlined} text={item.commentCount} key="list-vertical-message" /></Col>
                  <Col span={4} offset={1}><IconText icon={FieldTimeOutlined} text={item.updateTime} key="list-vertical-updateTime" /></Col>
                </Row>
              </Card>
            </List.Item>
          )}
        />
        <br />
      </Col>
      </Row>
      <Col span={18} offset={3} style={{ textAlign: 'center', }} ><Pagination showQuickJumper showSizeChanger defaultCurrent={1} total={total} onChange={handlPage} /></Col>
    </div>
  )
}

export default connect(({ attentionList, user }) => ({
  attentionUserInfo: attentionList.attentionUserInfo,
  userArticles: attentionList.userArticles,
  userInfo: user.userInfo,
  total: attentionList.total,
}))(AttentionDetail)